<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名<input type="text" name="username" />
        <span id="username-error"></span>
        <hr />
        密码：<input type="text" name="password" value="ccc" style="width: 300px" />
        <span id="password-error"></span>
        <br />
        确认密码：<input type="text" name="confirm_password" />
        <hr />
        <button class="btn">提交</button>
    </form>
</body>
<script>
    function query(name) {
        return document.querySelector(name)
    }

    function confirm(password,confirm_password,message,eleshow,event_type) {
        let elements = document.querySelectorAll(`[name='${password}'],[name='${confirm_password}']`)
        elements.forEach((ele)=>{
            ele.addEventListener(event_type,()=>{
                let passwordvalue=query(`[name=${password}]`).value
                let confirm_password_value=query(`[name=${confirm_password}]`).value
                if (passwordvalue != confirm_password_value) {
                    query(eleshow).innerHTML = message
                } else {
                    query(eleshow).innerHTML = ''
                }
            })
        })
    }
    function maxlen(elem,maxlen,message,eleshow,event_type) {
        let username=query(`[name=${elem}]`)
        let span=query(eleshow)
        username.addEventListener(event_type,()=>{
            if (username.value.length>maxlen) {
                span.innerHTML=message
            }
            else {
                span.innerHTML=''
            }
        })
    }
    confirm(`password`, 'confirm_password', '两次密码不一致', '#password-error', 'keyup')
    maxlen('username',10,'用户名最大不超过10位','#username-error','keyup')
</script>
</html>